<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body {
                margin: 20px;
                background-image:url("罗小黑-背景.jpg") ;
                background-size: cover;
            }

            .center_div {
                border:5px solid #6f9c8d;
                margin-left: auto;
                margin-right: auto;
                width: 80%;
                background-color: #229567;
                text-align: center;
                padding: 10px;
            }

            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #0c603e;
            }

            li {
                float:left;
            }

            li a,.dropbth {
                display: inline-block;
                color:whitesmoke;
                text-align: center;
                padding: 16px 20px;
                text-decoration: none;
            }

            li a:hover, .dropdown:hover .dropbtn {
                background-color:#6f9c8d;}

            li.dropdown {
                display: inline-block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color:whitesmoke;
                min-width: 121px;
                box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
                z-index: 1;
            }
            
            .dropdown-content a {
                color:black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

            .dropdown-content a:hover {
                background-color: #0c603e;
            }
                
            .dropdown:hover .dropdown-content {
                display: block;
            }
            
            a{
                text-decoration: none;
            }

            .center{
                margin: auto;
                width: 50%;
                border: 5px solid #777;
                padding: 10px;
            }

            tr:nth-child(2){
                background:#c3ffeb;
            }
            div.gallery {
                margin: 5px;
                border: 1px solid #ccc;
                float: left;
                width: 180px;
            }
            div.gallery:hover {
                border: 1px solid #777;
            }
            div.gallery img {
                box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                width: 100%;
                height: auto;
            }
            div.desc {
                padding: 15px;
                text-align: center;
            }
            .footer {
                background-color: #f1f1f1;
                padding: 10px;
                text-align: center;clear: both;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="center_div">
                <header>
                    <h1>罗小黑战记</h1>
                    <h3>----愿你出走半生，仍留赤子之心。</h3>
                    <ul>
                        <li class="dropdown">
                            <a href="javascript:void(0)" class="dropbtn">主要人物</a>
                            <div class="dropdown-content">
                              <a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E9%BB%91/10712965?fromModule=lemma_inlink">罗小黑</a>
                              <a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E7%99%BD/19817163?fromModule=lemma_inlink">罗小白</a>
                              <a href="https://zh.moegirl.org.cn/%E9%98%BF%E6%A0%B9(%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0)#">罗根（阿根）</a>
                              <a href="https://baike.baidu.com/item/%E6%AF%94%E4%B8%A2/19136882?fromModule=lemma_inlink">比丢</a>
                              <a href="https://baike.baidu.com/item/%E5%B1%B1%E6%96%B0/19407454?fromModule=lemma_inlink">山新</a>
                              <a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0/8383472#4_1">其他人物</a>
                            </div>
                        </li>
                        <li class="dropdown">
                            <a href="javascript:void(0)" class="dropbtn">衍生作品</a>
                            <div class="dropdown-content">
                              <a href="https://baike.baidu.com/item/%E8%93%9D%E6%BA%AA%E9%95%87/23752996?fromModule=lemma_inlink&fromtitle=%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0%C2%B7%E8%93%9D%E6%BA%AA%E9%95%87&fromid=23814701">蓝溪镇</a>
                              <a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0/22902442?fromModule=lemma_inlink">电影版罗小黑战记</a>
                            </div>
                        </li>
                        <li><a href="https://baike.baidu.com/item/%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0/8383472#4_1">设定解释</a></li>
                        <li class="dropdown">
                            <a href="javascript:void(0)" class="dropbtn">MTJJ工作室</a>
                            <div class="dropdown-content">
                              <a href="https://baike.baidu.com/item/%E4%B8%87%E5%9C%A3%E8%A1%97/23760166?lemmaFrom=lemma_starMap&fromModule=lemma_starMap">万圣街</a>
                            </div>
                        </li>
                    </ul>
            </div>
        </header>
        <div class="center"><table border="1">
            <thead>
              <tr>
                <th>制作组</th>
                <th>人员名单</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>导演/编剧</td>
                <td>木头</td>
              </tr>
              <tr>
                <td>监制</td>
                <td>木头/顾杰</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td>配音演员</td>
                <td>山新，皇贞季，笑谈，桃宝</td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="gallery">
            <img src="罗小黑.jpg" alt="Cinque Terre" width="600" height="400">
        </a>
        <div class="desc">罗小黑：躲入纸箱中避雨误被小白捡回家的妖精黑猫</div>
        </div>
        
        <div class="gallery">
            <img src="罗小白.jpg" alt="Forest" width="600" height="400">
          </a>
          <div class="desc">罗小白：单纯可爱，天然活泼以致有些许冒失的小学生</div>
        </div>
        
        <div class="gallery">
            <img src="阿根.jpg" alt="Northern Lights" width="600" height="400">
          </a>
          <div class="desc">阿根（罗根）：小白的乡下堂哥，似乎有一些不为人知的秘密......</div>
        </div>
        
        <div class="gallery">
            <img src="比丢.jpg" alt="Mountains" width="600" height="400">
          </a>
          <div class="desc">比丢：除了金属和活物什么都能吃的团鼠</div>
        </div>

        <div class="gallery">
              <img src="山新.jpg" alt="Mountains" width="600" height="400">
            </a>
            <div class="desc">山新：小白的好朋友，魔兽高玩，包裹内多橙装。</div>
        </div>
       
        <div class="gallery">
              <img src="老君.jpg" alt="Mountains" width="600" height="400">
            </a>
            <div class="desc">太上老君：表面稳重实则沉迷ACG几十年不出门的老“神仙”</div>
        </div>
        
 
        <div class="footer">
              <p>The Second Homework</p>
              <p>作者主页<a href="https://gitee.com/across-the-starry-sea">ATSS</a></p>
            </div>
        </body></div>      
    </body>
</html>